<template>
<div class="layerRtb layerRtb-threecolumn">
    <three-title :title="{name:'工期'}"></three-title>
    <div class="layerRtb-scroll thinScroll" v-scrollHeight = "137">
        <div class="analyItem" v-for="(item,index) in proportion.orderList" :key="index">
            <p class="analyItemTit tx-center" :title="item.proname">{{item.proname.substring(0,4)}}</p>
            <div class="analyItemCon">
                <p class="col-md-4">
                    <span class="cLightGray pr8">单号</span>
                    <span>{{item.orderNo}}</span>
                </p>
                <p class="col-md-4">
                    <span class="cLightGray pr8">阶段</span>
                    <span>{{item.type}}</span>
                </p>
                <p class="col-md-4">
                    <span class="cLightGray pr8">项目金额</span>
                    <span class="">{{item.contract_fee == 0 ? 0 : (item.contract_fee / 10000).toFixed(2)}}万</span>
                </p>
                <p class="col-md-4">
                    <span class="cLightGray pr8">项目经理</span>
                    <span>{{item.pm_username}}</span>
                </p>
                <p class="col-md-4" v-if="item.type !== '审计' ">
                    <span class="cLightGray pr8">应完工</span>
                    <span class="">{{formatDate(item.finshTime)}}</span>
                </p>
                <p class="col-md-4" v-if="item.finisDay < 0  && item.type !== '审计'">
                    <span class="cLightGray pr8">{{item.type}}超期天数</span>
                    <span class="cRed">{{Math.abs(item.finisDay)}}</span>
                </p>
                <p class="col-md-4" v-if="item.finisDay >= 0 && item.type !== '审计'">
                    <span class="cLightGray pr8">{{item.type}}剩余工期</span>
                    <span class="cGreen">{{Math.abs(item.finisDay)}}</span>
                </p>
            </div>
        </div>
    </div>
    <div class="layerRtb-footer">
        <div class="analyItem">
            <p class="analyItemTit tx-center">综合</p>
            <div class="analyItemCon">
                <p class="col-md-4">
                    <span class="cLightGray pr8">项目数量</span>
                    <span>{{propor}}</span>
                </p>
                <p class="col-md-4">
                    <span class="cLightGray pr8">超期</span>
                    <span>{{proportion.Overdue}}</span>
                </p>
                <p class="col-md-4">
                    <span class="cLightGray pr8">超期率</span>
                    <span>{{(proportion.Overdue / propor * 100).toFixed(2)}}%</span>
                </p>
            </div>
        </div>
    </div>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
import {findCompletedProportion} from '../../Resources/Api'
export default {
    data () {
        return {
            proportion: {}, // 项目经理 订单
            propor: 0 // 订单数量
        }
    },
    created () {
        this.proportion = this.$route.query.proportion
        this.propor = this.$route.query.proportion.orderList.length
        // this.findCompletedProportion() // 项目经理 订单
    },
    computed: {
        ...mapGetters(['userInfo', 'leftInfo'])
    },
    methods: {
        // this.$route.query.regionId
        findCompletedProportion () {
            // this.userInfo.u_diqu
            var obj = {
                dqId: this.leftInfo.u_diqu
            }
            findCompletedProportion(obj).then(res => {
                if (res.data.statusCode === 1) {
                    this.proportion = res.data.Body
                    this.propor = res.data.Body.orderList.length
                }
            }).catch(err => {
                console.log(err)
            })
        },
        // 时间转换
        formatDate (value) {
            let date = new Date(value)
            let y = date.getFullYear()
            let MM = date.getMonth() + 1
            MM = MM < 10 ? ('0' + MM) : MM
            let d = date.getDate()
            d = d < 10 ? ('0' + d) : d
            return y + '-' + MM + '-' + d
        }

    }
}
</script>

